<template>
  <div class="contain-home">
    <el-container>
      <el-header>
        <div class="left-box">
          <p class="title">电子报告智能化管理平台</p>
          <div class="nav-list">
            <span :class="routerActive === index ? 'active' : ''" v-for="(item,index) in routeList" :key="index"
                  @click="routerActive = index">{{ item.name }}</span>
          </div>
        </div>
        <div class="right-box">
          <el-avatar :size="40" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
          <el-dropdown @command="handleCommand" style="margin-left: 20px">
                          <span class="el-dropdown-link" style="color: #fff">
                            {{ userInfo.userName }}
                          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu style="border: none"
                   background-color="#ffffff"
                   :default-active="$route.path"
                   text-color="#000"
                   router
          >
            <el-menu-item :index="item.path" style="margin-bottom: 10px" v-for="item in routerPage" :key="item.id">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {quitLogin} from "../api/aboutLogin";

export default {
  name: 'Home',
  data() {
    return {
      routerActive: 0,
      routeList: [],
      routerPage: [],
      userInfo: null
    }
  },
  watch: {
    routerActive(newVaL, oldVal) {
      this.routerPage = this.routeList[newVaL].child
      this.$router.push(this.routerPage[0].path)
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('user'))
    console.log('flog', this.userInfo)
    if (this.userInfo.roleFlag === 3) {
      this.routeList = [
        {
          name: '实验报告',
          child: [
            {
              id: 1,
              name: '我的报告',
              icon: 'el-icon-document-copy',
              path: '/report'
            },
            {
              id: 2,
              name: '模板下载',
              icon: 'el-icon-menu',
              path: '/template'
            }
          ]
        },
        {
          name: '案例库',
          child: [
            {
              id: 3,
              name: '案例查询',
              icon: 'el-icon-s-platform',
              path: '/prescription'
            },
            {
              id: 4,
              name: '我的案例',
              icon: 'el-icon-s-marketing',
              path: '/setting'
            },
          ]
        },
        {
          name: '通知消息',
          child: [
            {
              id: 5,
              name: '通知消息',
              icon: 'el-icon-message-solid',
              path: '/notice'
            },
          ]
        },
        {
          name: '个人中心',
          child: [
            {
              id: 6,
              name: '我的信息',
              icon: 'el-icon-s-custom',
              path: '/userCenter'
            },
            {
              id: 7,
              name: '修改密码',
              icon: 'el-icon-lock',
              path: '/changePassword'
            },
          ]
        }
      ]
    } else if (this.userInfo.roleFlag === 2) {
      this.routeList = [
        {
          name: '实验报告',
          child: [
            {
              id: 1,
              name: '报告管理',
              icon: 'el-icon-document-copy',
              path: '/reportManagement'
            },
            {
              id: 2,
              name: '模板管理',
              icon: 'el-icon-menu',
              path: '/templateManagement'
            }
          ]
        },
        {
          name: '案例库管理',
          child: [
            {
              id: 3,
              name: '案例管理',
              icon: 'el-icon-s-platform',
              path: '/recipeManagement'
            },
            {
              id: 999,
              name: '案例类别管理',
              icon: 'el-icon-s-grid',
              path: '/caseCategory'
            },
            {
              id: 4,
              name: '学生案例管理',
              icon: 'el-icon-s-marketing',
              path: '/studentCase'
            },
          ]
        },
        {
          name: '实验公告',
          child: [
            {
              id: 5,
              name: '实验公告',
              icon: 'el-icon-message-solid',
              path: '/createNotice'
            },
          ]
        },
        {
          name: '用户管理',
          child: [
            {
              id: 6,
              name: '实验室管理',
              icon: 'el-icon-house',
              path: '/laboratory'
            },
            {
              id: 7,
              name: '班级管理',
              icon: 'el-icon-set-up',
              path: '/classes'
            },
          ]
        },
        {
          name: '个人中心',
          child: [
            {
              id: 8,
              name: '我的信息',
              icon: 'el-icon-s-custom',
              path: '/userCenter'
            },
            {
              id: 9,
              name: '修改密码',
              icon: 'el-icon-lock',
              path: '/changePassword'
            },
          ]
        }
      ]
    } else if (this.userInfo.roleFlag === 1) {
      this.routeList = [
        {
          name: '实验报告',
          child: [
            {
              id: 1,
              name: '报告管理',
              icon: 'el-icon-document-copy',
              path: '/reportManagement'
            },
            {
              id: 2,
              name: '模板管理',
              icon: 'el-icon-menu',
              path: '/templateManagement'
            }
          ]
        },
        {
          name: '案例库管理',
          child: [
            {
              id: 3,
              name: '案例管理',
              icon: 'el-icon-s-platform',
              path: '/recipeManagement'
            },
            {
              id: 999,
              name: '案例类别管理',
              icon: 'el-icon-s-grid',
              path: '/caseCategory'
            },
            {
              id: 4,
              name: '学生案例管理',
              icon: 'el-icon-s-marketing',
              path: '/studentCase'
            },
          ]
        },
        {
          name: '实验公告',
          child: [
            {
              id: 5,
              name: '实验公告',
              icon: 'el-icon-message-solid',
              path: '/createNotice'
            },
          ]
        },
        {
          name: '用户管理',
          child: [
            {
              id: 6,
              name: '学生管理',
              icon: 'el-icon-s-tools',
              path: '/userManagement'
            },
            {
              id: 7,
              name: '教师管理',
              icon: 'el-icon-more',
              path: '/laboratoryManagement'
            },
            {
              id: 8,
              name: '实验室管理',
              icon: 'el-icon-s-home',
              path: '/laboratory'
            },
            {
              id: 9,
              name: '班级管理',
              icon: 'el-icon-s-management',
              path: '/classes'
            },

          ]
        },
        {
          name: '个人中心',
          child: [
            {
              id: 10,
              name: '我的信息',
              icon: 'el-icon-s-custom',
              path: '/userCenter'
            },
            {
              id: 11,
              name: '修改密码',
              icon: 'el-icon-lock',
              path: '/changePassword'
            },
          ]
        },
        {
          name: '操作日志',
          child: [
            {
              id: 12,
              name: '操作日志',
              icon: 'el-icon-s-tools',
              path: '/log'
            }
          ]
        }
      ]
    }

  },
  mounted() {
    this.routerPage = this.routeList[0].child
    this.$router.push(this.routerPage[0].path)
  },
  methods: {
    handleCommand() {
      this.$confirm('确定退出登录吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        quitLogin().then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            sessionStorage.clear()
            this.$router.replace('/')
          }
        })

      })
    },
  }

}
</script>
<style scoped lang="less">
.contain-home {
  width: 100vw;
  height: 100vh;
  overflow-y: hidden;

  /deep/ .el-dialog {
    background: transparent;
    box-shadow: none;
  }

  /deep/ .el-dialog__header {
    display: none;
  }

  /deep/ .el-dialog__body {
    padding: 0;
  }

  .el-container {
    width: 100%;
    height: 100%;

    .el-aside {
      height: 100%;
      background-color: #fff;
      padding: 50px 20px;

      /deep/ .el-menu-item.is-active {
        background-image: linear-gradient(to left, #eba0c7 0%, #c597d8 1%, #9188ed 100%);
        color: #fff !important;
        border-radius: 10px !important;
        transition: all .5s ease;
      }

      /deep/ .el-menu-item:hover {
        background-color: transparent !important;
      }

      .aside-header {
        width: 100%;
        padding: 20px 0;
        margin-bottom: 20px;
        text-align: center;
        font-size: 18px;
        line-height: 30px;
        color: #666;
        font-weight: bold;
        border-bottom: 1px solid #ccc;
      }
    }

    .el-header {
      padding: 0 30px;
      background-color: #9082bd;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left-box {
        display: flex;
        align-items: center;

        .title {
          font-size: 18px;
          color: #fff;
          letter-spacing: 1px;
          margin-right: 100px;
        }

        .nav-list {
          display: flex;

          span {
            display: inline-block;
            padding: 5px 0;
            color: #fff;
            font-size: 16px;
            margin: 0 30px;
            box-sizing: border-box;
            border-bottom: 2px solid transparent;

            &:hover {
              cursor: pointer;
            }
          }

          .active {
            border-bottom: 2px solid #fff;
          }
        }
      }

      .right-box {
        display: flex;
        align-items: center;
      }
    }

    .el-main {
      background-color: #f3f8ff;
    }
  }
}
</style>
